<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">

    <!--表示使用IE最新的渲染模式进行解析-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--
            兼容一些移动设备，会根据屏幕的大小缩放
            width=device-width  表示宽度是设备的宽度（很多手机的宽度都是980px）
            initial-scale=1  初始化缩放级别   1-5
            minimum-scale=1  maximum-scale=5
            user-scalable=no  禁止缩放
        -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>视频列表管理</title>

    <!-- Bootstrap -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!-- 如果IE版本小于9，加载以下js,解决低版本兼容问题 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


    <!--
            引入网络的jquery  ,如果想换成自己的，导入即可
            网站优化：建议将你网站的css\js等代码，放置在互联网公共平台上维护，比如：七牛
        -->
    <script src="/static/js/jquery-1.12.4.min.js"></script>

    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/confirm.js"></script>
    <style type="text/css">
        th {
            text-align: center;
        }

        #context {
            text-align: center;
            line-height: 100%;
        }
        /*设置 a 标签的css样式*/
        .page-normal a{
            border: 1px solid #ff6500;
            padding: 5px 7px;
            color: #ff6500;
            margin-left: 20px;/*设置标签 a 之间的间隔*/
            text-decoration: none;/*去除页码数字下面的下划线*/
        }
        /*设置鼠标经过时 a 标签的css样式*/
        .page-normal a:hover{
            background-color: #ffbe94;
        }

        /*设置整个div的css样式,该样式主要用于设置网页内的省略号 …… 的样式，并且同时设置内容居中显示*/
        .page-normal{
            color: #ff6500;
            text-align: center;
        }

        /*设置当前页面的css样式*/
        .page-normal .page-current{
            color: #ffffff;
            background-color: #ff6500;
        }

        /*设置左单括号 < 的css样式*/
        .page-normal .page-prev{
            color: #ffe3c6;
        }

        /*进行代码优化，将不同css样式中共有的属性放在一起，有助于提高运行效率*/
        .page-normal a, .page-normal a:hover, .page-normal .page-prev, .page-normal .page-current{
            border: 1px solid #ff6500;
            padding: 5px 7px;
        }
    </style>

</head>
<body>


<nav class="navbar-inverse">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="/static/video/videoList.action">视频管理系统</a>
        </div>

        <div class="collapse navbar-collapse"
             id="bs-example-navbar-collapse-9">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/behind/video/listVideo.jsp">视频管理</a></li>
                <li ><a href="/behind/video/speaker.jsp">主讲人管理</a></li>
                <li ><a href="/behind/video/classManage.jsp">课程管理</a></li>
            </ul>
            <p class="navbar-text navbar-right">
                <span>${user.email}</span> <i class="glyphicon glyphicon-log-in"
                                              aria-hidden="true"></i>&nbsp;&nbsp;<a href="/user/logout"
                                                                                    class="navbar-link">退出</a>
            </p>
        </div>
    </div>
</nav>

<div class="jumbotron" style="padding-top: 15px;padding-bottom: 15px;">
    <div class="container">
        <h2>视频管理</h2>
    </div>
</div>


<div class="container">

    <div class="row">
        <div class="col-md-2">
            <a href="/behind/video/addVideo.jsp">添加</a>
            <button id="btn" class="btn btn-primary" type="button" onclick="deleteAll()">
                批量删除 <span class="badge" id="delNum"></span>
            </button>
        </div>
        <div class="col-md-4"></div>
        <div class="col-md-6">
            <!-- 查询相关组件 -->
            <form class="navbar-form navbar-right" action="#" id="formOne">
                <input type="text" class="form-control" placeholder="标题" name="title" id="title">
                <div class="btn-group">
                    <select name="speakerName" class="form-control" id="speakerId">
                        <option value = ""> - - 主讲人 - - </option>
                    </select>
                    <%--<input type="text"  placeholder="主讲人">--%>
                </div>
                <div class="btn-group">
                    <select name="courseTitle" class="form-control" id="courseId">
                        <option value = ""> - - 课程 - - </option>
                    </select>
                    <%--<input type="text"  class="form-control" placeholder="课程">--%>
                </div>
                <button type="submit" class="btn btn-info dropdown-toggle" onclick="return page(1)">查询</button>
            </form>

        </div>

    </div>
</div>

<div class="container" style="margin-top: 20px;">
    <form action="delBatchVideos.action" method="post">
        <table class="table table-bordered table-hover"
               style="text-align: center;table-layout:fixed" id="context">
            <thead>
            <tr class="active">
                <th style="width:3%"><input type="checkbox" onclick="selectAll(this)" name = "checkAll" id="checkAllId"/></th>
                <th style="width:5%">序号</th>
                <th style="width:15%">名称</th>
                <th style="width:42%;">介绍</th>
                <th>讲师</th>
                <th>时长</th>
                <th style="width:7%">播放次数</th>
                <th>编辑</th>
                <th>删除</th>
            </tr>
            </thead>
        </table>

        <div class="page-normal">
            <a href="#" onclick="return page(1)">第一页</a>
            <a href="#" class="page-prev"  id="start">上一页</a>
            <!-- 数字1 代表当前页面-->

            <a href="#" id="end">下一页</a>
            <a href="#" id = "endPage">最后一页</a>
        </div>
    </form>
</div>
</body>
<script src="/static/js/video.js"></script>
<script>
    let pageNum = 0;
    let pages = 0;
    function page(nextPageNum) {
        if(nextPageNum <= pages && nextPageNum > 0){
            $("#"+pageNum+"").removeClass("page-current");
            $("#"+nextPageNum+"").attr("class","page-current");
        }
        for(let i = 1 ; i <=pages ; i++){
            $("#"+i+"").remove();
        }
        let json ={"title":$("#title").val(),"speakerId":$("#speakerId").val(),"courseId":$("#courseId").val()}
        $.ajax({
            url:"/video/pageInfo/"+nextPageNum,
            type:"POST",
            data:json,
//            contentType: "application/json",
            success: function (data) {
                pageNum = data.data[3].pageNum;
                pages =  data.data[3].pages;
                $(".content").empty();
                $.each(data.data[0], function (i, obj) {
                    $("#context").append("<thead class='content'><tr class=\"active\"><td style=\"width:3%\"><input type=\"checkbox\"  name = \"checkAllId\" value =\""+obj.id+"\"/></td>" +
                        "<td style=\"width:5%\">" + obj.id + "</td><td style=\"width:15%\">" + obj.title + "</td><td style=\"width:42%;\">" + obj.detail + "</td>" +
                        "<td>" + obj.speaker.speakerName + "</td><td>" + obj.time + "</td><td style=\"width:7%\">" + obj.playNum + "</td><td onclick='update("+obj.id+")'>编辑</td><td onclick='deleteVideo("+obj.id+")'>X</td></tr></thead>");

                });
                for(let i = 1;i <= data.data[3].pages; i++ ){
                    if(i == data.data[3].pageNum){
                        $("#end").before("<a href=\"#\" onclick='return page("+i+")' id = \""+i+"\" class='page-current'>"+i+"</a>");
                    }else{
                        $("#end").before("<a href=\"#\" onclick='return page("+i+")' id = \""+i+"\">"+i+"</a>");
                    }
                }
            }
        });
        return false;
    }
    function deleteVideo(id) {
        $.ajax({
            url:"/video/"+id,
            type:"delete",
            success: function (data) {
                page(pageNum);
            },
            error:function (data) {
                page(pageNum);
            }
        });
    }
    function update(id) {
       window.location = "/behind/video/updateVideo.jsp?id="+id;
    }
    $(function () {
        let json ={"title":$("#title").val(),"speakerId":$("#speakerId").val(),"courseId":$("#courseId").val()}
        $.ajax({
            url: "/video",
            type: "post",
            data: json,
//            contentType: "application/json",
            success: function (data) {
                $.each(data.data[0], function (i, obj) {
                    $("#context").append("<thead class = \"content\"><tr class=\"active\"><td style=\"width:3%\"><input type=\"checkbox\"  name = \"checkAllId\" value = \""+obj.id+"\"/></td>" +
                        "<td style=\"width:5%\">" + obj.id + "</td><td style=\"width:15%\">" + obj.title + "</td><td style=\"width:42%;\">" + obj.detail + "</td>" +
                        "<td>" + obj.speaker.speakerName + "</td><td>" + obj.time + "</td><td style=\"width:7%\">" + obj.playNum + "</td><td onclick='update("+obj.id+")'>编辑</td><td onclick='deleteVideo("+obj.id+")'>X</td></tr></thead>");

                });
                $.each(data.data[1],function (index,obj) {
                    $("#speakerId").append("<option value=\""+obj.id+"\">"+obj.speakerName+"</option>");
                });
                $.each(data.data[2],function (index,obj) {
                    $("#courseId").append("<option value=\""+obj.id+"\">"+obj.courseTitle+"</option>");
                });
                pageNum = data.data[3].pageNum;
                pages =  data.data[3].pages;
                for(let i = 1;i <= data.data[3].pages; i++ ){
                    if(i == data.data[3].pageNum){
                        $("#end").before("<a href=\"#\" onclick='return page("+i+")' id = \""+i+"\" class='page-current'>"+i+"</a>");
                    }else{
                        $("#end").before("<a href=\"#\" onclick='return page("+i+")' id = \""+i+"\">"+i+"</a>");
                    }

                }

            },
            error: function () {
                alert("服务器繁忙,请稍后再试!");
            }

        });

    });
    $("#start").click(function () {
        page(pageNum - 1)
    });
    $("#end").click(function () {
        page(pageNum + 1)
    });
    $("#endPage").click(function () {
        page(pages)
    });
    let jiudge = false;
    function selectAll() {

        // alert($selectAll.prop("checked"));
        if ($("#checkAllId").prop("checked") == true) {
            // 上面的复选框已被选中
            $(":checkbox[name='checkAllId']").prop("checked", true);
        } else {
            // 上面的复选框没被选中
            $(":checkbox[name='checkAllId']").prop("checked", false);
        }
    }
    function deleteAll() {
        let values = new Array();
        $.each($(":checkbox[name='checkAllId']"),function (index,obj) {
            values.push(obj.value);
        })

        console.log(JSON.stringify(values));
        $.ajax({
            url:"/video/"+values,
            type:"delete",
            success: function (data) {
                page(pageNum);
            },
            error:function (data) {
                page(pageNum);
            }
        });
    }
</script>
</html>